<template>
  <div class="flex_dom flex_justify_between flex_align_center option">
    <a-button shape="circle" class="btn">
      <icon-double-left />
    </a-button>

    <div class="name line_text_1 text_center" :title="customerServiceName">
      {{ customerServiceName }}
    </div>

    <a-trigger position="top" trigger="click" auto-fit-position :unmount-on-close="false">
      <a-button class="btn">
        <template #icon>
          <icon-more />
        </template>
      </a-button>
      <template #content>
        <div class="shopInfo">
          <div class="item">后台管理系统</div>
        </div>
      </template>
    </a-trigger>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const customerServiceName = ref<string>('')

onMounted(() => {
  window.electron.ipcRenderer.send('get-customer-service-name')
  window.electron.ipcRenderer.on('customer-service', (_, list: any) => {
    customerServiceName.value = list.name
  })
})
</script>
<style lang="scss" scoped>
.option {
  height: 40px;
  padding: 0 4px;
  background-color: var(--addr-bg);

  .btn {
    width: 28px;
    height: 28px;
    color: var(--addr-btn);
    background-color: transparent;
    &:hover {
      color: #ffffff;
      background-color: var(--addr-btn-active);
    }
  }

  .name {
    width: calc(100% - 56px);
  }
}

.shopInfo {
  width: 120px;
  padding: 4px 8px;
  background-color: #f2f3f5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .item {
    height: 24px;
    line-height: 24px;
    cursor: pointer;
  }
}
</style>
